<template>
  <view class="container">
    <!-- 筛选标签 -->
    <van-sticky>
      <view class="filter-section">
        <van-tabs v-model:active="activeTab" @click-tab="onTabClick">
          <van-tab title="全部" name="all"></van-tab>
          <van-tab title="检验" name="lab"></van-tab>
          <van-tab title="影像" name="imaging"></van-tab>
          <van-tab title="心电" name="ecg"></van-tab>
        </van-tabs>
      </view>
    </van-sticky>

    <!-- 检查报告列表 -->
    <view class="reports-list">
      <view v-if="filteredReports.length === 0" class="empty-state">
        <van-empty description="暂无检查报告" />
      </view>

      <van-card
        v-for="report in filteredReports"
        :key="report.id"
        :title="report.examName"
        :desc="`${report.department} | ${report.date}`"
      >
        <template #thumb>
          <view class="report-icon" :class="`icon-${report.type}`">
            <van-icon :name="getReportIcon(report.type)" size="24" />
          </view>
        </template>

        <template #tags>
          <van-tag :type="getStatusType(report.status)">
            {{ report.status }}
          </van-tag>
          <van-tag v-if="report.isAbnormal" type="warning" style="margin-left: 8rpx;">
            异常
          </van-tag>
        </template>

        <template #footer>
          <view class="card-actions">
            <van-button
              size="small"
              type="primary"
              plain
              @click="viewReport(report)"
              :disabled="report.status === '检查中'"
            >
              {{ report.status === '检查中' ? '检查中' : '查看报告' }}
            </van-button>
            
            <van-button
              v-if="report.status === '已完成'"
              size="small"
              @click="downloadReport(report)"
            >
              下载
            </van-button>
          </view>
        </template>
      </van-card>
    </view>

    <!-- 报告详情弹窗 -->
    <van-popup
      v-model:show="showReportDetail"
      position="bottom"
      :style="{ height: '80%' }"
      closeable
      @close="showReportDetail = false"
      @click-overlay="showReportDetail = false"
    >
      <view class="report-detail" v-if="selectedReport">
        <view class="detail-header">
          <view class="detail-title">{{ selectedReport.examName }}</view>
          <view class="detail-info">
            <text>{{ selectedReport.department }} | {{ selectedReport.date }}</text>
          </view>
        </view>
        
        <scroll-view class="detail-content" scroll-y>
          <van-cell-group>
            <van-cell title="检查项目" :value="selectedReport.examName" />
            <van-cell title="申请科室" :value="selectedReport.department" />
            <van-cell title="申请医生" :value="selectedReport.doctorName" />
            <van-cell title="检查日期" :value="selectedReport.date" />
            <van-cell title="报告状态" :value="selectedReport.status" />
          </van-cell-group>
          
          <van-divider>检查结果</van-divider>
          
          <view class="result-section">
            <view v-if="selectedReport.type === 'imaging'" class="imaging-result">
              <view class="result-images">
                <image
                  v-for="(image, index) in selectedReport.images || []"
                  :key="index"
                  :src="image"
                  class="result-image"
                  @click="previewImage(image, selectedReport.images || [])"
                />
              </view>
            </view>
            
            <view v-if="selectedReport.results" class="lab-results">
              <van-cell-group>
                <van-cell
                  v-for="(result, index) in selectedReport.results"
                  :key="index"
                  :title="result.item"
                  :value="`${result.value} ${result.unit}`"
                  :label="result.reference"
                  :class="{ 'abnormal-result': result.isAbnormal }"
                />
              </van-cell-group>
            </view>
            
            <view v-if="selectedReport.conclusion" class="conclusion">
              <van-divider>检查结论</van-divider>
              <view class="conclusion-text">
                {{ selectedReport.conclusion }}
              </view>
            </view>
            
            <view v-if="selectedReport.suggestion" class="suggestion">
              <van-divider>医师建议</van-divider>
              <view class="suggestion-text">
                {{ selectedReport.suggestion }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface TestResult {
  item: string;
  value: string;
  unit: string;
  reference: string;
  isAbnormal: boolean;
}

interface ExamReport {
  id: number;
  examName: string;
  type: 'lab' | 'imaging' | 'ecg';
  department: string;
  doctorName: string;
  date: string;
  status: '检查中' | '已完成';
  isAbnormal: boolean;
  results?: TestResult[];
  images?: string[];
  conclusion?: string;
  suggestion?: string;
}

const activeTab = ref("all");
const showReportDetail = ref(false);
const selectedReport = ref<ExamReport | null>(null);

const examReports = ref<ExamReport[]>([
  {
    id: 1,
    examName: "血常规检查",
    type: "lab",
    department: "内科",
    doctorName: "张医生",
    date: "2024-01-15",
    status: "已完成",
    isAbnormal: true,
    results: [
      {
        item: "白细胞计数",
        value: "12.5",
        unit: "×10⁹/L",
        reference: "参考值: 3.5-9.5",
        isAbnormal: true
      },
      {
        item: "红细胞计数",
        value: "4.2",
        unit: "×10¹²/L",
        reference: "参考值: 4.3-5.8",
        isAbnormal: false
      },
      {
        item: "血红蛋白",
        value: "135",
        unit: "g/L",
        reference: "参考值: 130-175",
        isAbnormal: false
      },
      {
        item: "血小板计数",
        value: "285",
        unit: "×10⁹/L",
        reference: "参考值: 125-350",
        isAbnormal: false
      }
    ],
    conclusion: "白细胞计数偏高，提示可能存在感染",
    suggestion: "建议结合临床症状，必要时进行进一步检查"
  },
  {
    id: 2,
    examName: "胸部CT扫描",
    type: "imaging",
    department: "外科",
    doctorName: "李医生",
    date: "2024-01-08",
    status: "已完成",
    isAbnormal: false,
    images: [
      "/static/ct1.jpg",
      "/static/ct2.jpg"
    ],
    conclusion: "胸部CT未见明显异常",
    suggestion: "定期复查，注意休息"
  },
  {
    id: 3,
    examName: "心电图检查",
    type: "ecg",
    department: "心内科",
    doctorName: "王医生",
    date: "2024-01-10",
    status: "已完成",
    isAbnormal: false,
    images: [
      "/static/ecg.jpg"
    ],
    conclusion: "心电图显示窦性心律，各项指标正常",
    suggestion: "保持良好生活习惯，适当运动"
  },
  {
    id: 4,
    examName: "肝功能检查",
    type: "lab",
    department: "内科",
    doctorName: "张医生",
    date: "2024-01-20",
    status: "检查中",
    isAbnormal: false
  }
]);

const filteredReports = computed(() => {
  if (activeTab.value === "all") {
    return examReports.value;
  }
  return examReports.value.filter(report => report.type === activeTab.value);
});

const getReportIcon = (type: string) => {
  const iconMap = {
    lab: "records",
    imaging: "photo-o",
    ecg: "chart-trending-o"
  };
  return iconMap[type as keyof typeof iconMap] || "records";
};

const getStatusType = (status: string) => {
  return status === "已完成" ? "success" : "warning";
};

const onTabClick = (tab: any) => {
  console.log("切换标签:", tab.name);
};

const viewReport = (report: ExamReport) => {
  if (report.status === "检查中") {
    uni.showToast({
      title: "报告还在检查中",
      icon: "none"
    });
    return;
  }
  
  selectedReport.value = report;
  showReportDetail.value = true;
};

const downloadReport = (report: ExamReport) => {
  uni.showToast({
    title: "下载功能开发中",
    icon: "none"
  });
};

const previewImage = (current: string, images: string[]) => {
  uni.previewImage({
    current,
    urls: images
  });
};

onLoad(() => {
  console.log("检查报告页面 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.filter-section {
  background: white;
  border-bottom: 1rpx solid #eee;
}

.reports-list {
  padding: 16rpx;
}

.report-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.icon-lab {
    background: #f0f9ff;
    color: #1989fa;
  }
  
  &.icon-imaging {
    background: #f0f9f0;
    color: #07C160;
  }
  
  &.icon-ecg {
    background: #fff7e6;
    color: #ff6b35;
  }
}

.card-actions {
  display: flex;
  gap: 16rpx;
}

.empty-state {
  padding: 100rpx 0;
}

.report-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-header {
  padding: 32rpx;
  border-bottom: 1rpx solid #eee;
  
  .detail-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
  }
  
  .detail-info {
    font-size: 28rpx;
    color: #666;
  }
}

.detail-content {
  flex: 1;
  padding: 16rpx 0;
}

.result-section {
  padding: 0 32rpx;
}

.imaging-result {
  .result-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 32rpx;
  }
  
  .result-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    background: #f5f5f5;
  }
}

.lab-results {
  .abnormal-result {
    .van-cell__value {
      color: #ee0a24;
      font-weight: bold;
    }
  }
}

.conclusion,
.suggestion {
  margin: 32rpx 0;
  
  .conclusion-text,
  .suggestion-text {
    background: #f8f9fa;
    padding: 24rpx;
    border-radius: 16rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: #333;
  }
}
</style>